
html {
    margin: 0;
    background: #e74c3c ;
    overflow: hidden;
    display: block;
}


#edit_css,#edit_html {
    resize: none;
    border-radius: 5px;
    border: 0;
    resize: none;
    overflow: hidden;
    overflow-y: scroll;
    background: rgba(49, 55, 68, 1);
    color: #ffffff;
    width: 100%;
    display: inline-block;
    height:180px;
}





.giftbox {
    width: 250px;
    height: 185px;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -150px;
    z-index: 10;
    cursor: pointer;
}


.giftbox > div {
    background: #34495e;
    position: absolute;

    -webkit-animation:giftbox 1s ease-in-out infinite;
    animation:giftbox 1s ease-in-out infinite;
}

.giftbox .cover {
    top: 0;
    left: 0;
    height: 25%;
    width: 100%;
    z-index: 2;
}

.giftbox .box {
    bottom: 0;
    height: 80%;
    left: 5%;
    right: 5%;
    z-index: 1;
}

.giftbox > div::after,
.giftbox > div::before {
    position: absolute;
    top: 0;
}

/* ribbon */
.giftbox > div::before {
    background: #fdc56d;
    width: 50px;
    left: 50%;
    height: 100%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

/* shadow */
.giftbox .box::after {
    background: rgba(0,0,0,0.1);
    left: 0;
    height: 30px;
    width: 100%;
}

.giftbox .cover div {
    position: absolute;
    height: 60px;
    width: 60px;
    bottom: 100%;
    left: 50%;
    margin-left: -30px;
}

.giftbox .cover div::before,
.giftbox .cover div::after {
    position: absolute;
    width: 100%;
    height: 100%;
    background: transparent;
    border-radius: 30px;
    box-shadow: inset 0 0 0 14px #fdc56d;
}

.giftbox .cover div::before {
    -webkit-transform: translateX(-45%) skewY(40deg);
    transform: translateX(-45%) skewY(40deg);
}

.giftbox .cover div::after {
    -webkit-transform: translateX(45%) skewY(-40deg);
    transform: translateX(45%) skewY(-40deg);
}
#snowfall{
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    display: block;
}


@keyframes giftbox{ 0%{ transform:rotate(3deg); } 50%{ transform:rotate(-3deg); } 100%{ transform:rotate(3deg); } }
#text{
    color: #ffffff;
    width: 100%;
    text-align: center;
    font-size: 100px;
    font-size: 6rem;
    font-family: cursive;
    -webkit-animation:text 1s forwards ease-in;
    animation:text 1s forwards ease-in;
    opacity: 0;
    display: block;
}

.giftbox .box{
    display: block;
    -webkit-animation:box 1s forwards ease-in;
    animation:box 1s forwards ease-in;
}
.giftbox .cover{

    -webkit-animation:cover 1s forwards ease-in;
    animation:cover 1s forwards ease-in;
}
@keyframes cover{ from{top:0px;} to{ top:-600px; } }
@keyframes box{  from{height:80%;} to{ height: 0%; } }
@keyframes text{ from{opacity:0;} to{ opacity :1;} }

/*------------------------圣诞快乐------------------------*/
.giftbox{
    display: none;
}
#text{
    opacity: 1;
}


/*By：S*/